<template>
  <el-form ref="form" :model="form" label-width="80px">
    <div class="info">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button class="greenBtn" type="success" @click="addQuestion">
        <i class="el-icon-edit"></i> 新增试题</el-button
      >
    </div>
    <div class="row min-width">
      <div class="content">
        <el-form-item label="学科">
          <el-select
            @change="getDirectoryList"
            v-model="form.subjectID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in subjectList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="二级目录">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option
              v-for="item in directoryList"
              :label="item.directoryName"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="标签">
          <el-select v-model="form.tags" placeholder="请选择">
            <el-option
              v-for="item in tagsList"
              :label="item.tagName"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="关键词">
          <el-input
            v-model="form.keyword"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </div>
    </div>
    <div class="row min-width">
      <div class="content">
        <el-form-item label="试题类型">
          <el-select v-model="form.questionType" placeholder="请选择">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简单" value="3"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option
              v-for="(item, index) in directionList"
              :label="item"
              :value="item"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="录入人">
          <el-select v-model="form.creatorID" placeholder="请选择">
            <el-option
              v-for="item in creatorList"
              :label="item.username"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </div>
    <div class="row min-width">
      <div class="content">
        <el-form-item label="题目备注">
          <el-input
            v-model="form.remarks"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="企业简称">
          <el-input
            v-model="form.shortName"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="城市">
          <div class="row">
            <el-select
              v-model="form.province"
              @change="getCitysList"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :label="item"
                :value="item"
                :key="index"
              ></el-option>
            </el-select>
            <div class="between"></div>
            <el-select v-model="form.city" placeholder="请选择">
              <el-option
                v-for="(item, index) in cityList"
                :label="item"
                :value="item"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item>
          <div class="row right">
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </div>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as tagsList } from '@/api/hmmm/tags'
import { simple as userList } from '@/api/base/users'
export default {
  name: 'CompanysSearch',
  data () {
    return {
      props: ['submitData'],
      form: {
        page: 1, // 1 当前页数
        pagesize: 10, // 10 页尺寸
        subjectID: '', // 学科 *
        difficulty: '', // 难度 *
        questionType: '', // 试题类型 *
        tags: '', // 标签名称 *
        province: '', // 企业所在地省份 *
        city: '', // 企业所在城市 *
        keyword: '', // 关键字 *
        remarks: '', // 题目备注 *
        shortName: '', // 企业简称 *
        direction: '', // 方向 *
        creatorID: '', // 录入人 *
        catalogID: '' // 目录
        // chkState: ''// 审核状态
      },
      subjectList: [], //学科列表
      directoryList: [], //目录列表
      tagsList: [], // 标签列表
      directionList: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      creatorList: [],
      provincesList: [],
      cityList: []
    }
  },
  created () {
    this.initList()
  },
  methods: {
    onSubmit () {
      // this.$parent.$parent.submitData(this.form)
      this.$emit('get-list', this.form)
    },
    async initList () {
      const { data } = await simple()
      this.subjectList = data
      const { data: data2 } = await userList({ subjectID: this.form.subjectID })
      // console.log(data2)
      this.creatorList = data2
      this.provincesList = provinces()
    },
    async getDirectoryList () {
      const { data } = await list({
        page: 1,
        subjectID: this.form.subjectID
      })

      const { data: data2 } = await tagsList({
        page: 1,
        subjectID: this.form.subjectID
      })
      //赋值目录列表
      this.directoryList = data.items
      this.tagsList = data2.items
      console.log(data2)
    },
    getCitysList () {
      this.form.city = ''
      this.cityList = citys(this.form.province)
    },
    resetForm () {
      this.form = {
        page: '', // 1 当前页数
        pagesize: '', // 10 页尺寸
        subjectID: '', // 学科 *
        difficulty: '', // 难度 *
        questionType: '', // 试题类型 *
        tags: '', // 标签名称 *
        province: '', // 企业所在地省份 *
        city: '', // 企业所在城市 *
        keyword: '', // 关键字 *
        remarks: '', // 题目备注 *
        shortName: '', // 企业简称 *
        direction: '', // 方向 *
        creatorID: '', // 录入人 *
        catalogID: '' // 目录
        // chkState: ''// 审核状态
      }
      this.directoryList = []
      this.tagsList = []
      this.cityList = []
      this.$parent.$parent.submitData(this.form)
    },
    addQuestion () {
      this.$router.push('/questions/new')
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  justify-content: space-between;
  color: rgb(255, 192, 203);
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 35px;
  .greenBtn {
    width: 100px;
    height: 33px;
    padding: 0;
    span {
      font-size: 12px;
    }
  }
}
.row {
  display: flex;
  .content {
    flex: 1;
    .el-select {
      width: 100%;
    }
    .between {
      width: 15px;
    }
  }
  &.right {
    justify-content: flex-end;
    button {
      width: 55px;
      height: 30px;
      padding: 0;
    }
  }
  &.min-width {
    min-width: 650px;
  }
}
</style>
